<template>
  <div
    class="_page-container _box-item-container"
    :class="{ _mobile: isMobile }"
  >
    <div
      v-if="loading"
      class="flex items-center justify-center"
      style="min-height: var(--realbox-content-clip-header-height)"
    >
      <loading-comp class="!w-5rem" :track-width="10" />
    </div>
    <div class="_box-item-content" v-else>
      <div class="_animation">
        <hit-product-list
          ref="hitRef"
          :products="boxInfo?.scroll_product_list || []"
          :is-mobile="isMobile"
          @tick="onTick"
        />
      </div>
      <div class="_content-wrapper">
        <div class="_btn-wrapper">
          <el-button
            class="_open-btn _btn"
            type="primary"
            size="large"
            :disabled="openBoxLoading"
            @click="onOpenSpin(OpenBoxType.PROD)"
          >
            <span class="_btn-text">
              Open for ${{ boxInfo?.spin_amount }}
            </span>
          </el-button>
          <el-button
            class="_demo-btn _btn"
            type="info"
            size="large"
            :disabled="openBoxLoading"
            @click="onOpenSpin(OpenBoxType.DEMO)"
          >
            <div class="_btn-text">
              <img v-if="!isMobile" class="w-1.06rem" :src="DemoSpin" />
              <span>Demo Spin</span>
            </div>
          </el-button>
        </div>
        <div class="_product-panel">
          <div class="_product-title-wrapper">
            <span>{{ boxInfo?.name }}</span>
            <span>-</span>
            <div>
              <span>$</span>
              <span>{{ boxInfo?.spin_amount }}</span>
            </div>
          </div>
          <box-product-list
            :product-list="productList"
            :is-mobile="isMobile"
            warpper-class="_box-detail-product"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import DemoSpin from "@/assets/demoSpin.png";
import LoadingComp from "@/components/Loading/loading.vue";
import { useMedia } from "@/hooks/useMedia";

import BoxProductList from "../components/BoxProductList/boxProductList.vue";
import { useBoxDetail } from "../hooks/useBoxDetail";
import type { HitProductListInstance } from "./HitBoxProductList/hitProductList";
import HitProductList from "./HitBoxProductList/hitProductList.vue";
import { OpenBoxType, useOpenBox } from "./useOpenBox";

const hitRef = ref<HitProductListInstance>();

const route = useRoute();
const isMobile = useMedia();
const { boxInfo, loading, getBoxInfo } = useBoxDetail();
const { openBoxLoading, onOpenSpin, onTick } = useOpenBox(hitRef, boxInfo);

const productList = computed(() => {
  return boxInfo.value?.show_product_list || [];
});

onBeforeMount(() => {
  getBoxInfo({
    id: Number(route.params.box_id),
  });
});
</script>

<style lang="less" scoped>
._box-item-container {
  @apply flex flex-col;
  ._box-item-content {
    padding: 0 1.38rem;
    ._animation {
      @apply w-full py-1.69rem;
      aspect-ratio: 77.94 / 15.13;
      min-height: 0;
      border-bottom: 0.06rem solid var(--realbox-bg-price-btn);
    }

    ._content-wrapper {
      @apply flex flex-col;
      gap: 5.31rem;
      padding: 0 7.9rem;
      margin-top: 2.25rem;
      ._btn-wrapper {
        ._open-btn {
          width: 22.5rem;
        }
        ._demo-btn {
          width: 14.63rem;
        }
        ._btn-text {
          @apply flex items-center justify-center;
          gap: 0.2rem;
          padding: 0.31rem 0;
          font-size: 1.31rem;
        }
      }
      ._product-panel {
        @apply flex flex-col;
        gap: 2rem;
        ._product-title-wrapper {
          @apply flex items-center;
          gap: 0.4rem;
          font-size: 1.5rem;
        }
      }
    }

    ._box-detail-product {
      gap: 1.25rem;
      ._product-item {
        width: calc((100% - 1.25rem * 4) / 5);
      }
    }
  }

  &._mobile {
    width: 100%;
    ._box-item-content {
      padding: 0.63rem 0.88rem;
      ._animation {
        padding: 0;
        aspect-ratio: 21.69 / 12.69;
        min-height: 0;
        border: 0.06rem solid var(--realbox-bg-price-btn);
        border-radius: 0.25rem;
      }
      ._content-wrapper {
        gap: 1.88rem;
        padding: 0;
        margin-top: 1.25rem;
        ._btn-wrapper {
          @apply flex items-center;
          ._btn {
            flex: 1;
            width: 0;
          }
          ._btn-text {
            font-size: 1rem;
          }
        }
        ._product-panel {
          gap: 1.88rem;
          ._product-title-wrapper {
            gap: 0;
            font-size: 1.31rem;
          }
        }
      }
    }
  }
}
</style>
